<!--
 * @Author: 曹捷
 * @Date: 2020-06-17 16:07:32
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-09-03 17:02:38
 * @Description: 文章
--> 
<template>
  <div :class="{'main-content':hasBack}" class="list-item">
    <div @click="goDetail(item)" class="list-body flex-l" v-if="imageList.length ===1">
      <image :src="item.fileUrl" class="list-show-img m-r-10" lazy-load mode="aspectFill" />
      <div class="flex1 flex-t-b">
        <div @click="goDetail(item)" class="article-title obit-title fz-title">{{ item.title }}</div>
        <div class="article-bottom color-info">
          <text>{{item.realName}}</text>
          <slot></slot>
          <text class="f-r" v-if="showTime">{{ item.createTime }}</text>
        </div>
      </div>
    </div>
    <div @click="goDetail(item)" class="list-body" v-else>
      <div class="article-title obit-title fz-title">{{ item.title }}</div>
      <div class="image-content flex-l-r p-b-10 p-t-10">
        <image :key="index" :src="item" class="list-img" mode="aspectFill" v-for="(item,index) in imageList" />
        <div class="list-img-bak"></div>
      </div>
      <div class="article-bottom color-info">
        <text>{{item.realName}}</text>
        <slot></slot>
        <text class="f-r" v-if="showTime">{{ item.createTime }}</text>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
    },
    hasBack: {
      type: Boolean,
      default: true,
    },
    showTime: {
      type: Boolean,
      default: true,
    },
    type: {
      type: [String, Number],
    },
  },
  data() {
    return {
      imageList: [],
    }
  },
  methods: {
    goDetail(item) {
      let info = {
        type: this.type,
      }
      this.$app.goto(
        '/pages/article/articleDetails',
        Object.assign(info, this.item)
      )
    },
  },
  mounted() {
    let list = []
    if (this.item.fileList)
      list = this.item.fileList.map((item) => {
        return item.compressFileUrl
      })
    list.splice(2)
    this.imageList = [this.item.fileUrl].concat(list)
  },
}
</script>

<style lang="scss">
.list-show-img {
  width: 180rpx;
  border-radius: 16rpx;
  height: 140rpx;
}
.list-img {
  width: 220rpx;
  height: 170rpx;
  border-radius: 16rpx;
}
.list-img-bak {
  width: 220rpx;
  height: 1rpx;
}
.main-content {
  .list-img {
    width: 210rpx;
    height: 160rpx;
    border-radius: 16rpx;
  }
  .list-img-bak {
    width: 200rpx;
    height: 1rpx;
  }
}
.uni-media-list-body {
  height: auto;
  justify-content: space-around;
}
.article-title {
  overflow: hidden;
}
</style>